<template>
  <div class="setting-r-content">
    <!-- 搜索条 -->
    <div class="search-content">
      <Col class="panel search-panel" span="24">
      <Form :label-width="70" inline :model="formHeader">
        <Col :span="24">
        <FormItem label="选择城市:">
          <Select clearable v-model="formHeader.cityId" style="width: 200px;" @on-change="cityChange">
            <Option :value="item.id" v-for="(item,index) in citylist" :key="index" :label="item.name"></Option>
          </Select>
        </FormItem>
        <FormItem label="企业名称:" v-if="userRole != 'ROLE_DEMO'">
          <Select clearable v-model="formHeader.companyId" style="width: 200px;" @on-change="formHeader.deviceName = ''">
            <Option :value="item.id" v-for="(item,index) in companyList" :key="index" :label="item.name"></Option>
          </Select>
        </FormItem>
        <FormItem label="企业名称:" v-if="userRole == 'ROLE_DEMO'">
          <Select clearable v-model="formHeader.companyId" style="width: 200px;" @on-change="formHeader.deviceName = ''">
            <Option :value="item.id" v-for="(item,index) in companyList" :key="index" :label="item.alias"></Option>
          </Select>
        </FormItem>
        <FormItem label="企业名称:" v-if="userRole == 'ROLE_DEMO'">
          <Select clearable v-model="formHeader.companyId" style="width: 200px;" @on-change="formHeader.deviceName = ''">
            <Option :value="item.id" v-for="(item,index) in companyList" :key="index" :label="item.alias"></Option>
          </Select>
        </FormItem>
        <FormItem label="设备名称:">
          <Input style="width: 190px;" v-model="formHeader.deviceName" placeholder="设备名称..." clearable></Input>
        </FormItem>
        </Col>
        <Col :span="24">
        <FormItem label="设备状态:">
          <RadioGroup type="button" v-model="formHeader.state">
            <Radio :label="null">全部</Radio>
            <Radio :label="1">正常</Radio>
            <Radio :label="2">告警</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="是否在线:">
          <RadioGroup type="button" v-model="formHeader.online">
            <Radio :label="null">全部</Radio>
            <Radio label="1">在线</Radio>
            <Radio label="0">离线</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem class="margin-left-20">
          <Button type="primary" @click.stop="_requireThing" style="margin-right:20px;">查询</Button>
          <Button type="primary" @click.stop="_addNew" :disabled="userRole=='ROLE_DEMO'">新增设备</Button>
        </FormItem>
        </Col>
      </Form>
      </Col>
    </div>
    <!-- 内容页 -->
    <div class="w1 setting-scroll__content" style="height: calc(100% - 109px);">
      <Row class="setting-content__row">
        <Col class="panel table-panel" :span="24">
        <Table :columns="userRole==='ROLE_DEMO'?columnsDemo:columns" :data="tableData" border :loading="pageInfo.loading"></Table>
        </Col>
        <!-- 分页 -->
        <Col class="panel page-panel cf" :span="24" style="margin-bottom: 10px;">
        <Page :total="pageInfo.total" :current.sync="pageInfo.page" class="fr" @on-change="switchThePaging" :page-size="15"></Page>
        </Col>
        <Col :span="24" class="page-bottom">
        </Col>
        <Modal :styles="{top: '30px'}" v-model="dialogVisible" :title="isEdit?'编辑设备信息':'新建设备'">
          <deviceForm ref="deviceFormRef" v-if="dialogVisible" :row="editRow" :isEdit="isEdit" @btnDisable="btnDisable" @save="saveFunc" />
          <div slot="footer">
            <Button @click="dialogVisible=false;">取消</Button>
            <Button type="primary" :loading="btnLoading" @click="canValidate">
              <span v-if="!btnLoading">确定</span>
              <span v-else>保存中</span>
            </Button>
          </div>
        </Modal>
      </Row>
    </div>
  </div>
</template>
<script>
import { getCityListOfNew, getCompanyListOnOd, getOd, delOd } from "@/api";
import { deviceColumns } from "./materials";
import deviceForm from "./components/deviceForm";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      userRole: state => state.userInfo.rname
    })
  },
  async mounted() {
    await this._getCityListAll();
    this.getInitialState();
  },
  components: {
    deviceForm
  },
  data() {
    const vm = this;
    return {
      citylist: [],
      companyList: [],
      tableData: [],
      columns: [...deviceColumns(vm, false)],
      columnsDemo: [...deviceColumns(vm, true)],
      formHeader: {
        cityId: "",
        companyId: "",
        online: null,
        deviceName: "",
        state: null,
        id: ""
      },
      editRow: {},
      btnLoading: false,
      dialogVisible: false,
      isEdit: false,
      pageInfo: {
        total: 0,
        loading: false,
        page: 1
      }
    };
  },
  methods: {
    // 查询
    _requireThing() {
      const vm = this;
      vm.pageInfo.page = 1;
      vm.getInitialState();
    },

    // 获取城市列表
    async _getCityListAll() {
      let vm = this;
      await getCityListOfNew({}).then(res => {
        if (res.code == 200) {
          vm.citylist = res.data;
        }
      });
    },

    // 分页切换
    switchThePaging(index) {
      const vm = this;
      vm.pageInfo.page = index;
      vm.getInitialState();
    },

    // 获取表格数据
    getInitialState() {
      const vm = this;
      vm.pageInfo.loading = true;
      let params = {
        ...vm.formHeader,
        page: vm.pageInfo.page,
        size: 15,
        enable: -1
      };
      getOd(params).then(res => {
        if (res.code == 200) {
          vm.tableData = res.data.list;
          vm.pageInfo.total = res.data.total;
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        } else {
          setTimeout(_ => {
            vm.pageInfo.loading = false;
          }, 500);
        }
      });
    },

    canValidate() {
      this.$refs.deviceFormRef.isValidate();
    },

    // 城市变更，企业列表联动
    cityChange(id) {
      let that = this;
      that.companyList = [];
      that.formHeader.companyId = "";
      that.formHeader.deviceName = "";
      if (!!id) {
        that.formHeader.cityId = id;
        that._getCompanyList();
      }
    },

    // 获取企业列表
    _getCompanyList() {
      let vm = this;
      let params = {
        cityId: vm.formHeader.cityId,
        size: 1000000
      };
      return new Promise((resolve, reject) => {
        getCompanyListOnOd(params).then(res => {
          if (res.code == 200) {
            vm.companyList = res.data;
            resolve();
          } else {
            reject();
          }
        });
      });
    },

    // 新增
    _addNew() {
      this.isEdit = false;
      this.dialogVisible = true;
    },

    // 删除
    handleDelete(id) {
      delOd(id).then(res => {
        if (res.code === 200) {
          this.$Message.success("操作成功");
          this.getInitialState();
        } else this.$Message.error(res.message);
      });
    },

    // 编辑设备信息
    handleEdit(row) {
      const vm = this;
      vm.editRow = JSON.parse(JSON.stringify(row));
      vm.isEdit = true;
      vm.dialogVisible = true;
    },

    // 禁用提交按钮
    btnDisable(flag) {
      this.btnLoading = flag;
    },

    // 子组件提交后返回状态
    saveFunc() {
      this.dialogVisible = false;
      this.pageInfo.page = 1;
      this.getInitialState();
      // 重新拉取列表
    }
  }
};
</script>
